<template>
    <div class="my-bank-product-container">
        <div class="my-bank-product-text">我司金融产品:</div>
        <el-table
            :style="{'marginTop': '20px'}"
            v-loading="listLoading"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
        >
            <el-table-column
                align="center"
                type="index"
                width="180"
                label="序号"
            >
            </el-table-column>
            <el-table-column align="center" label="产品名称">
                <template slot-scope="scope">
                    {{ scope.row.title }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="投资形式">
                <template slot-scope="scope">
                    {{ scope.row.form }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="行业类别">
                <template slot-scope="scope">
                    {{ scope.row.business }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="信息池类别">
                <template slot-scope="scope">
                    {{ scope.row.pool }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        @click="handleCheckDetail(scope.$index, scope.row)">
                        详情
                    </el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    import {getMyBankProduct} from "../../api/bank-product";

    export default {
        name: "my-bank-product",
        data() {
            return {
                listLoading: true,
                list: null
            }
        },
        methods: {
            handleCheckDetail(index, row) {
                console.log(index)
                console.log(row)
                this.$router.push({path: '/bank-product-detail', query: {id: row.id}})
            },
            handleDelete(index, row) {
                console.log(index)
                console.log(row)
            }
        },
        mounted() {
            getMyBankProduct().then(res => {
                console.log(res)
                this.list = res.data
                this.listLoading = false
            })
        }
    }
</script>

<style lang="scss" scoped>
    .my-bank-product {
        &-container {
            margin: 30px;
        }

        &-text {
            font-size: 36px;
            line-height: 46px;
            font-weight: 600;
        }
    }
</style>
